<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>财务账单</title>
  <link rel="stylesheet" href="css\styles.css">
  <script src="js\chart.js"></script>
  <script src="js\script.js" defer></script>
  <script src="js\lantern.js" defer></script>

</head>

<body>
  <!--侧栏说明窗口-->
  <div id="sidebar">
    <div id="sidebar-content">
      <h3>账单页面说明</h3>
      <p>这里是关于如何使用这个财务账单页面的一些说明。</p>
      <p>这个页面是用来记录我的财务情况的，包括日期、费用来源和金额。但由于这个页面仍存在一些bug，所以功能不是很完善。</p>
      <p>每次刷新都会默认以<a href="http://localhost:5500/bill2/bills/bills.json">某个URL</a>中的账单json文件为目标展示账单（其实就是博客财务账单）</a></p>

      <h4>如果你是访客</h4>
      <p>你可以添加账单（但这没什么太大用），下载账单/json文件和账单/csv文件。但你无法上传账单、清除账单或者选择账单。</p>
      <h4>如果你是开发者</h4>
      <p>你可以上传账单、清除账单和选择账单。同时享有下载账单/json文件和账单/csv文件等访客功能。</p>
      <h4>功能组件说明：</h4>
      <list>
        <li>添加账单：在第一个窗口处填写日期、来源、金额后可以直接将其添加进下方的账单列表内；</li>
        <li>下载账单：提供了两种文件格式的下载：json&csv，其中json文件可以用于“选择账单”和“上传账单”</li>
        <li>选择账单：点击后选择你本地存储的账单json文件</li>
        <li>上传账单：选择账单后，覆盖当前页面内的账单，但这个覆盖是临时性的</li>
        <li>清除账单：清空当前页面内的账单，主要用于debug</li>
        <li>账单列表：会根据账单支出和收入情况自动按一定顺序排列，并展示出日期、来源、金额，同时每10条更换1页。最后计算并展示总金额，</li>
        <li>[开发中]统计图：展示支出和收入的统计图</li>
      </list>
      <h4>TodoList</h4>
      <list>
        <li>访客/开发者模式切换：这样能够根据上面的描述自动显示相应的功能组件，但是需要经过认证才能开启开发者模式</li>
        <li>统计图：展示支出和收入的统计图</li>
        <li>数据库：将账单的数据存储至数据库中</li>
        <li>……</li>
      </list>
    </div>
  </div>

  <div id="bill-form">
    <button id="toggle-sidebar-button">打开说明</button>
    <label for="date">日期:</label>
    <input type="date" id="date" required>
    <label for="source">费用来源:</label>
    <input type="text" id="source" required>
    <label for="amount">金额:</label>
    <input type="number" id="amount" step="0.01" required>
    <button onclick="addBill()">添加账单</button>

  </div>

  <div id="bill-list">
    <h2>账单列表</h2>
    <div id="button-container">
      <button onclick="downloadBills()" id="download-button">下载账单/json</button>
      <button id="download-csv">下载账单/CSV</button>
      <!-- 注释掉的按钮可根据需要启用 -->
      <button onclick="clearBills()" id="clear-button">清除账单</button>
      <input type="file" id="file-upload" accept=".json" style="display:none;" />
      <label for="file-upload" class="file-upload-label">选择账单</label>
      <button onclick="uploadBills()" id="upload-button">上传账单</button>
    </div>
    <div id="bill-items-container">
      <ul id="bill-items"></ul>
    </div>
    <div id="pagination-controls">
      <button id="prev-page" disabled>上一页</button>
      <span id="page-info"></span>
      <button id="next-page" disabled>下一页</button>
    </div>
    <div id="bill-total">
      <h3> <span id="total-amount">0.00</span></h3>
    </div>
    <div id="chart-container">
      <canvas id="billChart" width="400" height="200"></canvas>
    </div>
  </div>

</body>

</html>